<template>
    <div style="width: 600px;margin: auto;background-color: greenyellow;">
        <h1>实例:商品导航和商品列表</h1>
        <div style="float: left;width: 20%;">
            <!-- 商品导航组件 -->
             <GoodsNav @handle="clickHandle"></GoodsNav>
        </div>
        <div style="float: left;width: 80%;">
            <!-- 商品展示组件 -->
             <GoodList :list="list"></GoodList>
        </div>
    </div>
</template>

<script>
import GoodList from '@/components/GoodList.vue';
import GoodsNav from '@/components/GoodsNav.vue';

export default {
    components:{
        GoodsNav,
        GoodList
    },
    //父组件向子组件传递图片路径时，传的是绝对路径，但如果是直接使用绝对论，会加上ip和端口号，无法访问，
    //因此在父组件传递图片路径时，加上require可以解决这个问题
    data() {
        return {
            goods:[{id:'001',cid:'1',name:'香草冰激凌',src:require('../assets/logo.png')}, 
            {id:'002',cid:'1',name:'草莓冰激凌',src:require('../assets/logo.png')},
            {id:'003',cid:'1',name:'巧克力冰激凌',src:require('../assets/logo.png')},
            {id:'004',cid:'1',name:'蓝莓冰激凌',src:require('../assets/logo.png')},
            {id:'005',cid:'2',name:'香草蛋糕',src:require('../assets/logo.png')},
            {id:'006',cid:'2',name:'草莓蛋糕',src:require('../assets/logo.png')},
            {id:'007',cid:'2',name:'巧克力蛋糕',src:require('../assets/logo.png')},
            {id:'008',cid:'3',name:'巧克力1',src:require('../assets/logo.png')},
            {id:'009',cid:'3',name:'巧克力2',src:require('../assets/logo.png')},
            ],
            list:[]
        }
    },
    mounted(){
        this.list=this.goods.slice()
    },
    methods:{
        clickHandle(val){
            this.list=this.goods.filter(v=>v.cid==val)
        }
    }
}
</script>